<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<!-- <customNavBar1 :title="title"></customNavBar1> -->
		<c-nav-bar :title="title"></c-nav-bar>

		<view class="pops">
			<view class="from-item-one">
				<view>招聘类型</view>
				<view class="one-left">
					<view class="one" :class="colorindex == 1 ? 'active' : ''" @click="tab(1)">
						全职
					</view>
					<view class="two" :class="colorindex == 0 ? 'active' : ''" @click="tab(0)">
						兼职
					</view>
				</view>
			</view>
			<view class="from-item">
				<view class="text">职位名称</view>
				<view>
					<input type="text" style="text-align: right;" class="u-ipt" v-model="dto.positionName"
						placeholder="请输入">
				</view>
			</view>
			<view class="from-item">
				<view class="text">工作地点</view>
				<view>
					<input type="text" style="text-align: right;" class="u-ipt" placeholder="请输入" v-model="dto.address">
				</view>
			</view>
			<view class="from-item">
				<view class="text">联系人姓名</view>
				<view>
					<input type="text" style="text-align: right;" class="u-ipt" placeholder="请输入"
						v-model="dto.realName">
				</view>
			</view>
			<view class="from-item">
				<view class="text">联系人电话</view>
				<view>
					<input type="text" style="text-align: right;" class="u-ipt" placeholder="请输入" v-model="dto.phone">
				</view>
			</view>
			<view class="from-item-two">
				<view>薪资待遇</view>
				<view class="one-right" @click="showOne = true">
					<view style="display: flex;" v-if="dto.money == ''">
						请选择 <u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>
						{{ dto.money }}
					</view>
				</view>
			</view>
			<view class="from-item-two">
				<view>学历要求</view>
				<view class="one-right" @click="showTwo = true">
					<view style="display: flex;" v-if="dto.education == ''">
						请选择 <u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>
						{{ dto.education }}
					</view>
				</view>
			</view>
			<view class="from-item">
				<view class="text">工作描述</view>
				<view>
					<input type="text" style="text-align: right;" class="u-ipt" placeholder="请输入"
						v-model="dto.workDescribe">
				</view>
			</view>
		</view>

		<!-- 选择弹框薪资待遇 -->
		<u-popup :show="showOne" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showOne = false">
						取消
					</view>
					<view class="center">
						薪资待遇
					</view>
					<view class="right" @click="showOne = false">
						确定
					</view>
				</view>
				<view class="At-last" v-for="item, index in collegeList">
					<view class="item" @click="Degree(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item.name }}
					</view>
				</view>

			</view>
		</u-popup>

		<!-- 选择弹框学历要求 -->
		<u-popup :show="showTwo" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showTwo = false">
						取消
					</view>
					<view class="center">
						学历要求
					</view>
					<view class="right" @click="showTwo = false">
						确定
					</view>
				</view>

				<view class="At-last" v-for="item, index in JobList">
					<view class="item" @click="choose(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item.name }}
					</view>
				</view>

			</view>
		</u-popup>


		<view class="bottom-input" @click="applyFor">
			<view>发布</view>
		</view>

		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>


</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import inputBox from '@/compoments/inputBox/inputBox.vue'
	export default {
		components: {
			GetPhoneNumber,
			inputBox,
		},
		data() {
			return {
				title: '发布招聘',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				searchList: {},
				substrings: [],
				type: null,
				style: {
					// 字符串的形式
					p: 'color:#333333;font-size:30rpx; line-height: 48rpx; font-weight: Regular;',
					// span: 'font-size: 30rpx'
				},
				colorindex: 1,
				dto: {
					positionName: '', //职位名称
					address: '', //工作地点
					realName: '', //姓名
					phone: '', //联系电话
					money: '', //	薪资待遇
					workDescribe: '', //工作描述
					education: '', //学历
					jobType: 1, //求职类型 0兼职 1全职
				},
				collegeList: [{
						name: '1000-3000元'
					},
					{
						name: '3000-5000元'
					},
					{
						name: '6000-9000元'
					},
					{
						name: '10000-13000元'
					},
					{
						name: '面议'
					},
				],
				JobList: [{
						name: '不限'
					}, {
						name: '高中',
					},
					{
						name: '中专/技校',
					},
					{
						name: '大专',
					},
					{
						name: '本科',
					},
					{
						name: '硕士',
					}
				],
				showOne: false,
				showTwo: false,
				indexDb: null,
				showOne: ''
			};
		},

		// 招聘页面
		methods: {
			// 选择薪资待遇
			Degree(item, index) {
				this.dto.money = item.name
				// console.log('选择薪资待遇', this.dto.money);
				this.indexDb = index
			},
			// 选择学历
			choose(item, index) {
				this.dto.education = item.name
				console.log('选择学历', this.dto.education);
				this.indexDb = index
			},
			// 选择招聘类型
			tab(index) {
				// console.log(index);
				this.colorindex = index
				this.dto.jobType = index
			},
			// 发布
			applyFor(id) {

				if (uni.getStorageSync('userInfo') == '') {
					this.$login().then(res => {
						if (res !== 0) {
							this.$refs['phoneNumber'].show = true;
						}
					})
				} else {
					// console.log('this.dto.jobType',this.dto.jobType);
					if (!this.dto.jobType && this.dto.jobType !== 0) return this.$showToast('请选择招聘类型');
					if (!this.dto.positionName) return this.$showToast('请输入职位名称');
					if (!this.dto.address) return this.$showToast('请输入工作地点');
					if (!this.dto.realName) return this.$showToast('请输入姓名');
					if (!this.$reg.mobile(this.dto.phone)) return this.$showToast('请输入正确的联系电话');
					if (!this.dto.money) return this.$showToast('请选择薪资待遇');
					if (!this.dto.education) return this.$showToast('请选择学历');
					if (!this.dto.workDescribe) return this.$showToast('请输入工作描述');

					let newDto = JSON.parse(JSON.stringify(this.dto));
					newDto.realName = this.$aesTm.encrypt(newDto.realName);
					newDto.phone = this.$aesTm.encrypt(newDto.phone);
					this.$api.post('/api/commrecruit', newDto).then(res => {
						if (res.data.code == 0) {
							this.dto.jobType = '1'
							this.dto.positionName = ''
							this.dto.address = ''
							this.dto.realName = ''
							this.dto.phone = ''
							this.dto.money = ''
							this.dto.education = ''
							this.dto.workDescribe = ''
							this.$showToast('发布成功');
							// uni.navigateTo({
							// 	url: '/pagesService/market/market'
							// })
						}
					})
				}
			},
			open() {
				console.log('open');
			},
			close() {
				this.showOne = false
				this.showTwo = false
			}
		}
	}
</script>
<style lang="less" scoped>
	.u-ipt {
		border: none;
		outline: none;
		text-align: right;
		height: 102rpx;
		line-height: 102rpx;
		font-size: 30rpx;
		color: #666666;
		width: 440rpx;

		&::placeholder {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
	}

	.u-moreList {
		width: 60% !important;
	}

	.swiper {
		box-sizing: border-box;
		width: 100vw;
		height: 450rpx !important;
		backdrop-filter: blur(300px);
		background: rgba(251, 251, 251, .1);

	}

	.bottom-input {
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		height: 136rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		text-align: center;

		:nth-child(1) {
			height: 88rpx;
			line-height: 88rpx;
			width: 690rpx;
			background-color: #007A69;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: Regular;
			color: #FFFFFF;
			text-align: center;
			margin: 20rpx auto;
		}
	}

	.u-badge {
		padding: 0 !important;
		background-color: #FFFFFF !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.indicator {
		// @include flex(row);
		display: flex;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.u-modal__content__text {
		text-align: center !important;
	}

	.activeItem {
		background-color: #F5F8FA;
	}
</style>

<style lang="scss" scoped>
	.page {
		margin: 0;
		box-sizing: border-box;
		padding: 0;
		// background-color: aqua;
		// height: 100vh;
	}

	.pops {
		box-sizing: border-box;
		height: 45vh;
		margin: 24rpx;
	}

	.pop-titles {
		text-align: center;
		margin: 48rpx auto;
		font-size: 32rpx;
		color: #111111;

	}

	.from-item {
		// padding: 20rpx;
		height: 102rpx;
		line-height: 102rpx;
		// border: 1rpx solid #007A69;
		border-bottom: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		text-align: right;
		// border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		// class=""
		.text {
			height: 102rpx;
			line-height: 102rpx;
			font-size: 30rpx;
			color: #666666;
			width: 240rpx;
			text-align: left;
		}

		:nth-child(2) {
			height: 102rpx;
			line-height: 102rpx;
			text-align: right;
		}

		.left {
			margin: 10rpx 0;
		}

		.right {
			// margin: 10rpx 0;
			margin-top: 10rpx;
		}

		text {
			display: block;
			color: #111;

			&:nth-child(2) {
				margin: 8rpx 0;
			}

			&:nth-child(3) {
				color: #007A69;
			}
		}

		&:last-child {
			// padding-top: 40rpx;

			text {
				color: #007A69;
			}

		}


	}


	.from-item-one {
		height: 102rpx;
		line-height: 102rpx;
		// border: 1rpx solid #007A69;
		border-bottom: 1rpx solid #EFEFEF;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		// border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		:nth-child(1) {
			width: 240rpx;
			text-align: left;
		}

		.one-left {
			margin-top: 20rpx;
			display: flex;
			width: 280rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1rpx solid #007A69;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-weight: Regular;
			color: #777777;
			// margin-right: 20rpx;

			.one {
				width: 140rpx;
				text-align: center;
			}

			.two {
				width: 140rpx;
			}
		}
	}

	.from-item-two {
		height: 102rpx;
		line-height: 102rpx;
		// border: 1rpx solid #007A69;
		border-bottom: 1rpx solid #EFEFEF;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		// border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		.one-right {
			display: flex;
			height: 102rpx;
			line-height: 102rpx;
			text-align: center;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-weight: Regular;
			color: #777777;
			// margin-right: 20rpx;
		}
	}



	.pop {
		height: 665rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx 0;

		.hander {
			box-sizing: border-box;
			height: 113rpx;
			line-height: 113rpx;
			padding: 0 31rpx;
			display: flex;
			justify-content: space-between;

			.left {
				font-weight: Regular;
				font-size: 32rpx;
				color: #999999;
			}

			.right {
				font-weight: Regular;
				font-size: 32rpx;
				color: #007A69;
			}

			.center {
				font-weight: Bold;
				font-size: 32rpx;
				color: #1C1E41;
			}

		}

		.middle {
			box-sizing: border-box;
			width: 100%;
			// height: 136rpx;
			border-top: 1rpx solid #EFEFEF;
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			// justify-content: space-around;
			text-align: center;

			.left {
				flex: 1;
				// background-color: aqua;

				.left-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919D;
				}

				.left-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1C1E41;
					margin-bottom: 18rpx;
				}
			}

			.right {
				flex: 1;
				// background-color: antiquewhite;

				.right-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919D;
				}

				.right-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1C1E41;
					margin-bottom: 18rpx;
				}
			}
		}

		.At-last {

			font-size: 36rpx;
			color: #1C1E41;
			font-weight: Bold;
			text-align: center;
			margin: 0 auto;

			.item {
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				width: 670rpx;
				border-radius: 24rpx;
			}
		}

	}




	.active {
		background-color: #007A69;
		color: #fff;
	}
</style>